<!--
  @description: 自定义树状选择器
  @creator: yiming
  @date: 2021/03/11
-->
<template>
  <div
    :class="[
      'i-tree-select',
      disabled && 'disabled',
      value != undefined && 'selected-val',
    ]"
  >
    <InputLabel v-if="label" :text="label" :required="required" />
    <div :class="['ivu-tree-select', showDropdown ? 'ivu-select-visible ' : '']">
      <div class="ivu-select-selection select-input" @click="handleClickInput">
        <span class="ivu-select-selected-val" v-if="valueTitle">{{ valueTitle }}</span>
        <span class="ivu-select-placeholder" v-else>{{ placeholder }}</span>
        <i class="ivu-icon ivu-icon-ios-arrow-down ivu-select-arrow"></i>
        <i
          class="ivu-icon ivu-icon-ios-close-circle ivu-cascader-arrow"
          @click.stop="handleClearVal"
        ></i>
      </div>
      <div v-if="false">
        <IviewInput icon="ios-search" @on-focus="handleClickInput" />
        <!-- <Input /> -->
      </div>
      <transition name="dropdown">
        <div
          class="ivu-select-dropdown select-dropdown"
          v-show="showDropdown"
          v-autoHide="{ showDropdown }"
        >
          <Tree
            v-bind="$attrs"
            v-on="$listeners"
            @on-select-change="handleTreeSelect"
            :key="label"
            v-model="this.value"
          />
        </div>
      </transition>
    </div>
  </div>
</template>

<script>
import { inputMixin } from "./mixin/inputMixin";
export default {
  name: "IviewTreeSelect",
  mixins: [inputMixin],
  components: {},
  // 自定义v-model
  model: {
    prop: "value",
    event: "select"
  },
  props: {
    // v-model 值
    value: {
      type: [Number, String]
    },
    // 输入框标签
    label: {
      type: String
    }, // 是否必填，传入label才有效
    required: {
      type: Boolean
    },
    placeholder: {
      type: String,
      default: "请输入..."
    },
    // 是否禁用
    disabled: {
      type: Boolean
    },
    // 是否可以清除选中
    clearable: {
      type: Boolean,
      default: true
    },
    objInvalue: {
      type: Boolean,
      default: false
    },
    search: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      // 是否显示下拉框
      showDropdown: false
    };
  },
  watch: {
    value: {
      handler(n) {
      }
    }
  },
  computed: {
    // 数据字典
    treeDict() {
      let { data: treeData } = this.$attrs;
      return this.$u.tree.tree2dict(treeData || [], "value");
    },
    // 显示选择的文本
    valueTitle() {
      // let treeDict = this.$u.tree.tree2dict(treeData || [], "value");
      // console.log(this.value, 'this.value')
      return this.treeDict[this.value] && this.treeDict[this.value].title;
    }
  },
  created() {},
  methods: {
    // 清空所选值
    handleClearVal() {
      let node = this.treeDict[this.value];
      node && (node.selected = false);
      this.$emit("select", null);
    },
    // 点击选择框
    handleClickInput() {
      if (!this.disabled) {
        this.showDropdown = !this.showDropdown;
      }
    },
    // 选中节点
    handleTreeSelect(nodeArr) {
      this.showDropdown = false;
      if (nodeArr[0]) {
        let node = nodeArr[0];

        this.$emit("select", node.value || node.id);
        this.$emit("select-node", node);
      } else {
        let node = this.treeDict[this.value];
        node && (node.selected = true);
      }
    }
  }
};
</script>

<style lang="less" scoped>
@import "./config/input";
.i-tree-select {
  .input-layout();
  .ivu-tree-select {
    // position: relative; /** 加了这个会有问题？？！！ */
    .ivu-icon-ios-close-circle {
      display: none;
    }
    &.ivu-select-visible {
      .select-input {
        position: relative;
        box-shadow: 0px 0px 6px 0px rgba(133, 247, 220, 0.4),
          inset 0px 0px 8px 0px rgba(0, 0, 0, 0.48);
        .border(@main-color);
      }
    }
    .select-input {
      .input-view;
      .input-width;
      .input-text;
      font-size: @base-font-size;
      line-height: @input-height;
      width: 240px;
      padding: 0 8px;
      transition: all 0.3s;
      cursor: pointer;
      .ivu-select-placeholder {
        .placeholder();
      }
      &:hover {
        .border(@main-color);
      }
    }
    .select-dropdown {
      .select-dropdown;
      .input-show-scroll;
      min-width: 240px;
      position: absolute;
      // top: 40px;
      // left: 0;
      z-index: 900;
      /deep/.ivu-tree {
        padding: 0 20px 0 10px;
        li {
          // margin: 0;
          .ivu-tree-arrow {
            display: inline-block;
            line-height: 34px;
            height: 34px;
            .ivu-icon {
              color: #d3d6d9;
            }
          }
          .ivu-tree-title {
            padding: 0 40px 0 10px;
            display: inline-block;
            font-size: 16px;
            width: 100%;
            line-height: 34px;
            height: 34px;
            color: #d3d6d9;
            .click-active;
            user-select: none;
            transition: all 0.3s;
            &:hover {
              .bg(fade(#3a3a3a, 80%));
            }
            &.ivu-tree-title-selected {
              .bg(fade(#3a3a3a, 80%));
              // pointer-events: none;
            }
          }
        }
      }
    }
  }
  &.disabled {
    .ivu-tree-select {
      .select-input,
      .select-input:hover {
        cursor: not-allowed;
        opacity: 0.5;
        border: 1px solid #4e4e4f;
        box-shadow: inset 0 0 8px 0 rgba(0, 0, 0, 0.48);
      }
    }
  }
  // 清空值
  &.selected-val:not(.disabled) {
    &:hover {
      .ivu-icon-ios-arrow-down {
        display: none;
      }
      .ivu-icon-ios-close-circle {
        display: inline-block;
      }
    }
  }
}
</style>
